var VS_SHADER_RESOURCE =
    "attribute vec4 a_Position;\n" +
    "uniform vec4 u_translate;\n" +   // 直接使用顶点数据移动 ，或者也可以传入距离直接加上每个分量的值
    "void main(){\n" +
    "   gl_Position = a_Position + u_translate;\n" +
    "}\n";
var VS_SHADER_RESOURCE1 =
    "attribute vec4 a_Position;\n" +
    "uniform mat4 u_translate_mat4;\n" +  // 这里使用了矩阵来变换一个点的位移
    "void main(){\n" +
    "   gl_Position = u_translate_mat4 * a_Position;\n" +
    "}\n";

var FS_SHADER_RESOURCE =
    "precision mediump float;\n" +
    "uniform vec4 u_Color;\n" +
    "void main() {\n" +
    "   gl_FragColor = u_Color;\n" +
    "}\n";

function main1() {
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.error("not find gl!!");
        return;
    }
    if (!initShaders(gl, VS_SHADER_RESOURCE1, FS_SHADER_RESOURCE)) {
        console.error("init shader fail!!");
        return;
    }

    var n = initShaderBufffer2(gl);
    if (n > 0) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);

    }
}

function initShaderBufffer2(gl) {
    var buffer = gl.createBuffer();
    if (!buffer) {
        console.error("创建缓冲区失败！！");
        return;
    }
    var a_position = gl.getAttribLocation(gl.program, "a_Position");
    var u_translate_mat4 = gl.getUniformLocation(gl.program, "u_translate_mat4");
    var u_color = gl.getUniformLocation(gl.program, "u_Color");
    var pointArr = new Float32Array([
        0.0, 0.2,
        0.2, 0.5,
        -0.2, 0.5
    ]);
    var translateMatArr = new Float32Array([ //webgl的矩阵数组使用的时列主序的排列顺序
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.3, 0.0, 0.0, 1.0,
    ]);
    var translateMatArr = new Float32Array([ //webgl的矩阵数组使用的时列主序的排列顺序
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
    ]);
    var translateMat4 = new Matrix4();  // 通过矩阵类库来完成矩阵转化
    translateMat4.setRotate(30, 0.0,0.0,1.0);
    gl.uniform4f(u_color, 0.2, 0.2, 0.0, 1.0);
    gl.uniformMatrix4fv(u_translate_mat4, false, translateMat4.elements);// 设置矩阵数据，在webgl中第二个参数必须是false
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, pointArr, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_position);
    return 3;
}